<template>
	<view :class="['writeCard',isShowLoading ? 'writeCardActive' : '']">
	  <view class="wrap">
	    <text class="message">正在写卡,请勿拔卡!</text>
	    <image src="../../static/img/write-card.gif" class="loading"></image>
	  </view>
	</view>
</template>

<script>
	export default {
		props:{
			isShowLoading:{
				type:Boolean,
				default:false
			}
		}
	}
</script>

<style>
	.writeCard {
	  background-color: rgba(0, 0, 0, 0.3);
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: -9;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  opacity: 0;
	  transition: all 0.1s
	}
	.writeCardActive{
	  z-index: 9;
	  opacity: 1;
	}
	.writeCard .wrap {
	  background-color: #fff;
	  width: 614rpx;
	  height: 400rpx;
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  border-radius: 4rpx;
	  align-items: center;
	}
	.writeCard .message {
	  margin-top: 70rpx;
	  margin-bottom: 70rpx;
	  font-weight: 600;
	  font-size: 32rpx;
	}
	.writeCard .loading {
	  width: 150rpx !important;
	  height: 150rpx !important;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-bottom: 46rpx;
	}
</style>
